@import "./scss/file.scss";
@import "./scss/image.scss";
@import "./scss/video.scss";

.uploaded-list {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	padding-top: 15px;
	&.max-height {
		overflow-y: auto;
		max-height: 300px;
	}
	.cantclick {
		pointer-events: none;
		cursor: not-allowed;
	}
	.uploaded-list-item {
		width: 150px;
		height: 150px;
		display: block;
		margin: 0 10px 10px 0;
		cursor: pointer;
		border: 1px solid #eee;
		border-radius: 5px;
		overflow: hidden;
		position: relative;
		.uploaded-loading {
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
			z-index: 5;
			background: rgba(#000, 0.55);
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			.uploaded-loading-title {
				text-align: center;
				width: 100%;
				margin-bottom: 20px;
			}
			.uploaded-loading-progress {
				width: 100%;
				padding-inline: 20px;
			}
		}
		&.active {
			.uploaded-list-delete {
				display: none;
			}
			&::before,
			&::after {
				opacity: 1;
			}
		}
		&:last-child {
			margin-right: auto;
		}
		&::before {
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
			z-index: 4;
			background: rgba(0, 0, 0, 0.55);
			opacity: 0;
			transition: var(--transition);
		}
		&::after {
			content: "";
			position: absolute;
			top: -5px;
			bottom: 0;
			right: 0;
			left: 0;
			margin: auto;
			color: #fff;
			width: 33px;
			height: 17px;
			border-bottom: 2px solid currentColor;
			border-left: 2px solid currentColor;
			transform: rotate(-45deg);
			z-index: 4;
			opacity: 0;
			transition: var(--transition);
		}
	}
	.uploaded-list-image {
		width: 100%;
		height: 100%;
	}
	.uploaded-list-file-logo {
		display: block;
		margin: auto;
		margin-top: 6px;
	}
	.uploaded-list-file-tip {
		position: absolute;
		z-index: 3;
		bottom: 0;
		left: 0;
		width: 100%;
		background: rgba(#000, 0.6);
		color: #fff;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 2.3;
		padding: 0 10px;
		&::before {
			content: attr(title);
		}
	}
	.uploaded-list-delete {
		position: absolute;
		top: 5px;
		right: 5px;
		z-index: 5;
	}
}

.uploaded-link {
	text-align: center;
	.uploaded-title {
		font-size: 30px;
		line-height: 2;
	}
	.uploaded-link-input {
		display: flex;
		margin: auto;
		width: 60%;
		margin-top: 25px;
		margin-bottom: 30px;
	}
}
